<template>
    <a-modal width="500px" title="多实例配置" :visible="visible" @cancel="handleCancel" @ok="ok">
        <a-alert message="配置说明" type="info">
            <span slot="description">
                按照BPMN2.0规范的要求，用于为每个实例创建执行的父执行，会提供下列变量:<br>
                nrOfInstances：实例总数。<br>
                nrOfActiveInstances：当前活动的（即未完成的），实例数量。对于顺序多实例，这个值总为1。<br>
                nrOfCompletedInstances：已完成的实例数量。<br>
                loopCounter：给定实例在for-each循环中的index。<br>
            </span>
        </a-alert>
        <a-form :inline="false" :model="formData" size="small" layout="horizontal">
            <a-form-item label="集合" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">
                <a-input placeholder="请输入" v-model="formData.collection"></a-input>
            </a-form-item>
            <a-form-item label="元素变量" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">
                <a-input placeholder="请输入" v-model="formData.elementVariable"></a-input>
            </a-form-item>
            <a-form-item label="执行方式" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">
                <a-radio-group name="radioGroup" v-model="formData.isSequential">
                    <a-radio :value="true">
                        串行
                    </a-radio>
                    <a-radio :value="false">
                        并行
                    </a-radio>
                </a-radio-group>
            </a-form-item>
            <a-form-item label="完成条件" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">
                <a-input placeholder="请输入" v-model="formData.completionCondition"></a-input>
            </a-form-item>
            <a-form-item :wrapper-col="{ span: 14, offset: 6 }">
                <a-button type="primary" @click="empty">清空</a-button>
            </a-form-item>
        </a-form>
    </a-modal>
</template>

<script>
import mixinPanel from "../../../common/mixinPanel"
import { formatJsonKeyValue } from '../../../common/parseElement'
export default {
    props: {
        loading: {
            type: Boolean,
            required: true
        }
    },
    mixins: [mixinPanel],
    data() {
        return {
            visible: false,
            formData: {
                collection: '',
                elementVariable: '',
                isSequential: false,
                completionCondition: ''
            }
        }
    },
    watch: {
        loading() {
            this.visible = this.loading;
        }
    },
    mounted() {
        const cache = JSON.parse(JSON.stringify(this.element.businessObject.loopCharacteristics ?? {}))
        cache.completionCondition = cache.completionCondition?.body
        this.formData = formatJsonKeyValue(cache)
    },
    methods: {
        updateElement() {
            if (this.formData.isSequential !== null && this.formData.isSequential !== undefined) {
                let loopCharacteristics = this.element.businessObject.get('loopCharacteristics')
                if (!loopCharacteristics) {
                    loopCharacteristics = this.modeler.get('moddle').create('bpmn:MultiInstanceLoopCharacteristics')
                }
                loopCharacteristics['isSequential'] = this.formData.isSequential
                loopCharacteristics['collection'] = this.formData.collection
                loopCharacteristics['elementVariable'] = this.formData.elementVariable
                if (this.formData.completionCondition) {
                    const completionCondition = this.modeler.get('moddle').create('bpmn:Expression', { body: this.formData.completionCondition })
                    loopCharacteristics['completionCondition'] = completionCondition
                }
                this.updateProperties({ loopCharacteristics: loopCharacteristics })
            } else {
                delete this.element.businessObject.loopCharacteristics
            }
        },
        handleCancel() {
            this.visible = false
            this.$emit("show")
        },
        ok() {
            this.updateElement()
            this.$emit('show');
            this.change()
        },
        change() {
            this.$emit("change");
        },
        empty() {
            this.formData = {}
        }
    },
}
</script>

<style lang="less" scoped>
.ant-form-horizontal {
    margin-top: 20px;

    .ant-form-item {
        margin-bottom: 5px;
    }
}
</style>